<script setup>
import { reactive, ref, toRaw } from 'vue';
import {Login} from "../API/index"
import Cookie from "js-cookie"
import {
    useRouter
} from "vue-router";
import { ElMessage } from 'element-plus'
const router = useRouter()
// 用户名密码表单
const form = reactive({ username: '', password: '' })
// 设置效验
const rule = reactive({
    username: [{ message: '请输入用户名', required: true, trigger: 'blur' }],
    password: [{ message: '请输入密码', required: true, trigger: 'blur' }]
})
// 定义ref
const FormData = ref()
// 登录按钮
const  login = (formEl) => {
    // console.log( JSON.stringify(toRaw(form)));
    formEl.validate(async(bool) => {
        if (bool) {
            const data = await Login(toRaw(form))
            if(data.status==0){
            ElMessage({
    message: '登陆成功',
    type: 'success',
  })
  Cookie.set('username', JSON.stringify(toRaw(form)))
            router.push("/home");
           }else{
            ElMessage.error('账号密码错误')
           }
          
          
        }
    })
}

</script>

<template>
    <el-row class=" bg-indigo-500 min-h-screen">
        <el-col :lg="16" :md="12" class="flex justify-center items-center">
            <div>
                <div class=" text-light-50 text-5xl font-bold mb-10">欢迎光临</div>
                <div class="text-blue-gray-400">本开发是后台管理系统，管理用户信息和商品信息</div>
            </div>
        </el-col>
        <el-col :lg="8" :md="12" class="flex justify-center items-center bg-light-50 flex-col">
            <div class="font-bold text-3xl mb-5">欢迎回来</div>
            <div class="flex justify-center items-center my-5">
                <span class="h-[1px] w-16 bg-gray-200 mr-2"></span>
                <span class="text-gray-300">账号密码登录</span>
                <span class="h-[1px] w-16 bg-gray-200 ml-2"></span>
            </div>

            <el-form :model="form" :rules="rule" ref="FormData">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="用户名">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" placeholder="密码">
                        <template #prefix>
                            <el-icon><Connection /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button round type="primary" @click="login(FormData)" class="w-30 h-10">登录</el-button>
        </el-col>
    </el-row>
</template>

<style>
* {
    padding: 0;
    margin: 0;
}</style>